<template>
    <div class="bottom_nav">
      <ul>
        <li>
          <router-link to="/main">
          <img src="../images/Icon_wpfaqidejindian_home.png" >
          <b class="active">首页</b>
          </router-link>
        </li>
        <li>
         <router-link to="/find">
         <img src="../images/Icon_wpfaqidejindian_eye2.png" >
         <b>发现</b>
         </router-link>
        </li>
        <li>
          <router-link to="/type">
          <img src="../images/Icon_wpfaqidejindian_more.png">
          <b>分类</b>
          </router-link>
        </li>
        <li>
          <router-link to="/user">
          <img src="../images/Icon_wpfaqidejindian_person.png">
          <b>我的</b>
          </router-link>
        </li>
      </ul>
    </div>
</template>
<script>
  export default {
    name: 'bottomnav',
    data() {
      return {

      }
    }
  }

</script>

<style lang="less" scoped>
.bottom_nav{
    position: fixed;
    bottom: 0;
    font-size: 22/75rem;
    color: #808080;
    height: 98px;
    background-color: #fff;
    box-shadow: 5/75rem 0 50/75rem #fafafa;
    padding-bottom: 30/75rem;
}
li{
  float: left;
  margin:0 70.7/75rem;
}
img{
  height: 46/75rem;
  width: 46/75rem;
  display: block;
  margin:15/75rem 0 5/75rem 0;
}
b{
  display: block;
  line-height: 22/75rem;
}
.active{
  color:#ff406f;
}
</style>
